<template>
    <div class="form-container">
        <page-panel
            header-title="生产环境发布申请单填写"
            style="height: calc(100% - 40px);"
        >
            <div
                v-if="formJson"
                style="height: calc(100% - 60px);overflow: auto;width: 100%;"
            >
                <div style="width:100%;height: 50px; display: flex;flex-direction: row;justify-content: flex-start;margin:10px 0;align-items: center;">
                    <div style="width: 140px;">
                        项目名称：
                    </div>
                    <el-input
                        style="width: calc(100% - 140px);"
                        v-model="projectName"
                        placeholder="请输入项目名称"
                    >
                    </el-input>
                </div>
                <v-form-render
                    :form-json="formJson"
                    :form-data="formData"
                    :option-data="optionData"
                    ref="formRenderer"
                >
                </v-form-render>
                <div style="width:100%;height: 50px; display: flex;flex-direction: row;justify-content: flex-start;margin:10px 0;align-items: center;">
                    <div style="width: 140px;">
                        下一节点审批人：
                    </div>
                    <select-audit
                        style="width: calc(100% - 140px);"
                        :api-fn="fn.auditFn"
                        :show-dept="false"
                        :page-model="model"
                    />
                </div>
            </div>
            <div v-if="!formJson">
                <p>表单展示</p>
            </div>
            <el-footer
                v-if="formJson"
                style="line-height: 60px;float: right;"
            >
                <el-button
                    type="primary"
                    @click="handleSubmit"
                >提交申请</el-button>
            </el-footer>
        </page-panel>
    </div>
</template>

<script>
import SelectAudit from "@/components/audit/nextAudit/SelectAudit";
import { simpleRequired } from "../../../../utils/validate";
import { ModelTemplate } from "./modules/model";
import { queryById, save, submit, startProcess } from "../../api/productionEnvironmentReleaseApi";
import EditModel from "@/components/mainEntrance/pageLayout/EditModel.vue";
import EditMixin from "../../../../components/mixins/EditMixin";
import { merge, cloneDeep, get } from "lodash";

export default {
    name: 'ShowForm',
    components: { SelectAudit, EditModel },
    mixins: [EditMixin],
    props: {
        breadcrumbObj: Object,
    },
    data() {
        const rules = {};
        Object.keys(ModelTemplate).forEach(key => {
            rules[key] = simpleRequired;
        });
        return {
            projectName: "",
            formJson: null,
            formData: {},
            optionData: {},
            model: cloneDeep(ModelTemplate),
            fn: {
                save: (data, type) => {
                    if (type !== "submit") {
                        return save(data);
                    }
                    return submit(data);
                },
                findById: id => queryById(id).then(v => v.data.data),
                auditFn: () => startProcess()
            },
        };
    },
    created() {

    },
    mounted() {

        if (this.$route.query) {
            console.log(this.$route.query);

            this.formJson = JSON.parse(this.$route.query.formJson)
            // console.log('form json', this.formJson);
            // this.$nextTick(() => {
            //     let formData = {
            //         checkbox24733: [],
            //         color70555: null,
            //         input51867: "22222222222",
            //         radio48864: null,
            //         textarea25891: "",
            //         time40958: null,
            //     }
            //     this.$refs.formRenderer.setFormData(formData)
            // })
        }

    },
    methods: {

        handleSubmit() {
            try {
                this.getFormData();
            } catch (error) {
                console.warn('接口提示', error)
            }
        },
        async getFormData() {
            try {
                let formData = await this.$refs.formRenderer.getFormData();
                let paramData = {
                    projectName: this.projectName,
                    nextAuditInfos: this.model.nextAuditInfos,
                    nextAuditUsers: this.model.nextAuditUsers,
                    formJson: this.$route.query.formJson,
                    formId: this.$route.query.id,
                    formValue: JSON.stringify(formData)
                }
                console.log('paramData', paramData);
                save(paramData, "submit").then(res => {

                    console.log(res);
                    if (res.data.code == 200) {
                        this.$message.success("发布成功！");
                        this.$router.push({ path: "/ProdRelease/ProdEnvironmentReleaseList" });
                    } else {
                        this.$message.info("已取消发布!");
                    }
                })


            } catch (error) {
                console.warn('接口提示', error)
            }
        },
    }
};
</script>

<style scoped>
.form-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #fff;
    padding: 10px;
}
</style>